<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时钟</title>
</head>
<style>
    .timezp {
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-image: url("timezp.jpg");
        background-size: contain;
        margin: 0 auto;
        position: relative;
    }
    
    .oHours {
        height: 140px;
        width: auto;
        top: 155px;
        left: 230px;
        position: absolute;
        transition: tranfrom 0.5s;
    }
    
    .oMins {
        height: 200px;
        width: 140px;
        top: 115px;
        left: 230px;
        position: absolute;
    }
    
    .osens {
        position: absolute;
        top: 85px;
        left: 230px;
        width: 140px;
        height: 240px;
    }
</style>

<body>
    <div class="timezp">
        <img src="zz.png" class="oHours">
        <img src="zz.png" class="oMins">
        <img src="zz.png" class="osens">
    </div>
    <script>
        var time = function() {
            var hourpoint = document.querySelector(".oHours");
            var minutepoint = document.querySelector(".oMins");
            var secondpoint = document.querySelector(".osens");

            var date = new Date();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            hourpoint.style.transform = "rotate(" + hour * 30 + "deg)";
            hourpoint.style.transformOrigin = "50% 70%";
            minutepoint.style.transform = "rotate(" + minute * 6 + "deg)";
            minutepoint.style.transformOrigin = "50% 70%";
            secondpoint.style.transform = "rotate(" + second * 6 + "deg)";
            secondpoint.style.transformOrigin = "50% 70%";

        }
        time();
        setInterval(function() {
            time();
        }, 1000);
    </script>
</body>

</html>